<template>
	<view class="">
		<image class="mytopbg" src="@/static/headtopbg.png" mode="widthFix" v-if="navtop<30" />
		<page-head :title="nav_title" :headtype="2" :bgColor="navtop>30?'#fff':'transparent'"></page-head>
		<view class="content" v-if="Object.keys(orderDetail).length>0">
			<view class="ercode_warp">
				<view class="erc_top">
					<view class="erc_title">
						核销二维码
					</view>
					<view class="erc_type_word" v-if="orderDetail.order_type==2">
						取货方式：快递发货
					</view>
					<view class="erc_type_word" v-if="orderDetail.order_type==3">
						取货方式：同城配送
					</view>
					<view class="erc_type_word" v-if="orderDetail.order_type==1">
						取货方式：到店自提
					</view>
				</view>
				<view class="erc_line">
					<view class="l_cir"></view>
					<view class="line"></view>
					<view class="r_cir"></view>
				</view>
				<view class="erc_body">
					<view class="ercode_img"
						v-if="orderDetail.order_status==3||(orderDetail.order_status==2&&orderDetail.order_type==3)||(orderDetail.order_status==2&&orderDetail.order_type==2)">
						<image :src="URLimg+ercode.qrcode" mode="heightFix" style="height: 100%;"></image>
					</view>
					<view class="ercode_img_gary" v-else>
						<image :src="URLimg+ercode.qrcode" mode="heightFix" style="height: 100%;"></image>
					</view>
					<view class="er_tips" v-if="orderDetail.order_type==2&&orderDetail.order_status==2">
						商家未发货前也可到店核销商品
					</view>
					<view class="er_tips" v-if="orderDetail.order_type==3&&orderDetail.order_status==2">
						请先联系平台核销后才可配送
					</view>
					<view class="er_tips" v-if="orderDetail.order_type==1&&orderDetail.order_status==3">
						到店出示核销码即可
					</view>
					<view class="er_tips" style="color: #333333;"
						v-if="orderDetail.order_type==2&&orderDetail.order_status==4">
						商家已发货，核销码失效
					</view>
					<view class="er_tips" style="color: #333333;"
						v-if="orderDetail.order_type==3&&orderDetail.order_status==4">
						已核销，商家正在配送中
					</view>
					<view class="er_tips" style="color: #333333;"
						v-if="orderDetail.order_type==1&&orderDetail.order_status!=3">
						商家已核销，核销码失效
					</view>
				</view>
			</view>
			<view class="address" v-if="orderDetail.order_type!=1">
				<view class="add_data" v-if="orderDetail.address_info&&Object.keys(orderDetail.address_info).length>0">
					<u-icon name="map" color="#9E190F" size="40"></u-icon>
					<view class="addr_word">
						<view class="add_top">
							<view class="city">
								{{orderDetail.address_info.address}}
							</view>
							<view class="edit_addr" v-if="orderDetail.order_status==1||orderDetail.order_status==3"
								@click.stop="apifun.navigate('/pages/my/sitelist','type=order');">
								修改
								<u-icon name="arrow-right" color="#9E9E9E" size="32"></u-icon>
							</view>
						</view>
						<view class="add_center">
							{{orderDetail.address_info.house}}
						</view>
						<view class="add_bottom">
							<text style="margin-right: 50rpx;">{{orderDetail.address_info.username}}</text>
							<text>{{orderDetail.address_info.mobile}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="product_warp">
				<view v-for="(item,index) in orderDetail.detail" :key="index" style="width: 100%;"
					:class="index!=0?'marT20':''">
					<product-item-num :item="item"></product-item-num>
				</view>
			</view>
			<view class="cell_warp">
				<order-cell title="实付" lcolor="#666666" :lsize="30" :word="'￥'+orderDetail.pay_amount" rcolor="#333333"
					:rsize="30" padding="0rpx 0rpx 0rpx 0rpx"></order-cell>
			</view>
			<view class="cell_warp">
				<order-cell title="订单编号" lcolor="#666666" :lsize="30" :word="orderDetail.order_sn" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
				<order-cell title="付款时间" lcolor="#666666" :lsize="30" :word="orderDetail.pay_time" rcolor="#666666"
					:rsize="30"></order-cell>
				<order-cell title="商品金额" lcolor="#666666" :lsize="30" :word="'￥'+orderDetail.total_amount"
					rcolor="#666666" :rsize="30"></order-cell>
				<order-cell title="满减金额" lcolor="#666666" :lsize="30" :word="'￥'+orderDetail.activity_amount"
					rcolor="#666666" :rsize="30" v-if="orderDetail.activity_amount"></order-cell>
				<order-cell title="快递费" lcolor="#666666" :lsize="30"
					:word="orderDetail.freight>0?'￥'+orderDetail.freight:'0.00'" rcolor="#666666"
					:rsize="30"></order-cell>
				<order-cell title="优惠券" lcolor="#666666" :lsize="30"
					:word="orderDetail.coupon_amount>0?'-￥'+orderDetail.coupon_amount:'无'" rcolor="#666666" :rsize="30"
					:rightIcon="true"></order-cell>
				<order-cell title="运费券" lcolor="#666666" :lsize="30"
					:word="orderDetail.coupon_freight_amount>0?'-￥'+orderDetail.coupon_freight_amount:'无'"
					rcolor="#666666" :rsize="30" :rightIcon="true"></order-cell>
				<view class="cell_item" v-if="orderDetail.deduction==1">
					<view class="ci_title">
						{{"余额(￥"+orderDetail.deduction_amount+")"}}
					</view>
					<view class="deduct">
						<view class="">
							抵扣
						</view>
						<image src="../../static/order/sel.png" mode="widthFix"
							style="width: 34rpx;height: 34rpx;border-radius: 50%;margin-left: 28rpx;">
						</image>
					</view>
				</view>
			</view>

			<view class="cell_warp"  v-if="orderDetail.order_type==2&&orderDetail.order_status==4">
				<order-cell title="发货时间" lcolor="#666666" :lsize="30" :word="orderDetail.delivery_time" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
				<order-cell title="快递单号" lcolor="#666666" :lsize="30" :word="orderDetail.delivery_no" rcolor="#666666"
					:rsize="30"></order-cell>
			</view>
			<view class="cell_warp" v-if="orderDetail.order_type==1&&orderDetail.order_status==4"
				>
				<order-cell title="自提时间" lcolor="#666666" :lsize="30" :word="orderDetail.arrive_time" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
			</view>
			<view class="cell_warp" v-if="orderDetail.order_type==3&&orderDetail.order_status==4"
				>
				<order-cell title="配送时间" lcolor="#666666" :lsize="30" :word="orderDetail.delivery_time" rcolor="#666666"
					:rsize="30" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
			</view>
			<view style="width: 100%;margin-bottom: 90rpx;"></view>
		</view>
		<view class="sub_body">
			<view class="pay_word">
				<view style="color: #333333;font-size: 30rpx;"
					v-if="orderDetail.order_type==1&&orderDetail.order_status==3">
					请到店自提
				</view>
				<view style="color: #333333;font-size: 30rpx;"
					v-if="orderDetail.order_type==2&&orderDetail.order_status==2">
					待发货
				</view>
				<view style="color: #333333;font-size: 30rpx;"
					v-if="orderDetail.order_type==2&&orderDetail.order_status==4">
					已发货
				</view>
				<view style="color: #333333;font-size: 30rpx;"
					v-if="orderDetail.order_type==3&&orderDetail.order_status==4">
					配送中
				</view>
			</view>
			<view class="pay_btn_warp" v-if="orderDetail.order_status==3">
				<view class="pay_btn_gary" v-if="orderDetail.order_type!=1" @click.stop="cancelOrder()">
					取消订单
				</view>
				<view class="pay_btn" v-if="orderDetail.order_type!=1"
					@click.stop="apifun.navigate('/pages/my/sitelist','type=order');">
					修改地址
				</view>
				<view class="pay_btn" v-if="orderDetail.order_type==1" @click.stop="cancelOrder()">
					取消订单
				</view>
			</view>
			<view class="pay_btn_warp" v-if="orderDetail.order_status==2">
				<view class="pay_btn_gary" v-if="orderDetail.order_type!=1" @click.stop="cancelOrder()">
					取消订单
				</view>
				<view class="pay_btn" v-if="orderDetail.order_type!=1"
					@click.stop="apifun.navigate('/pages/my/sitelist','type=order');">
					修改地址
				</view>
			</view>
			<view class="pay_btn_warp" v-if="orderDetail.order_status==4" @click.stop="toSign()">
				<view class="pay_btn" v-if="orderDetail.order_type!=1">
					确认收货
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import productItemNum from "@/components/product_item_num_int.vue"
	import orderCell from "@/components/order_cell.vue"
	export default {
		components: {
			productItemNum,
			orderCell
		},
		data() {
			return {
				apifun: this.apifun,
				navtop: 0,
				isDeduction: false,
				order_sn: null,
				orderDetail: {},
				ercode: {},
				URLimg: this.apifun.URLimg,
				nav_title: "",
				typeList: [{
						id: "0",
						name: "已取消"
					},
					{
						id: "1",
						name: "待付款"
					},
					{
						id: "2",
						name: "待发货"
					},
					{
						id: "3",
						name: "待核销"
					},
					{
						id: "4",
						name: "待收货"
					},
					{
						id: "5",
						name: "待评论"
					},
					{
						id: "6",
						name: "已完成"
					},
					{
						id: "7",
						name: "申请退款"
					},
					{
						id: "8",
						name: "填写信息"
					},
					{
						id: "9",
						name: "退款中"
					},
					{
						id: "10",
						name: "退款成功"
					},
					{
						id: "11",
						name: "已预约"
					}
				]
			}
		},
		onPageScroll(e) {
			this.navtop = e.scrollTop
		},
		onLoad(options) {
			if (options.orderSn) {
				this.order_sn = options.orderSn
				this.getOrderDetail()
			}
		},
		methods: {
			toSign(item) {
				uni.showModal({
					title: "确定收到货物吗？",
					cancelText: "取消",
					cancelColor: "#999999",
					confirmText: "确定",
					confirmColor: "#9E190F",
					success: (res) => {
						if (res.confirm) {
							let data = {
								order_sn: this.orderDetail.order_sn
							}
							this.apifun.unirequest("/api/order/confirmReceipt", "post", data, (res => {
								if (res.code == 200) {
									this.apifun.toast('已确认')
									let pages = getCurrentPages();
									let prevPage = pages[pages.length - 2];
									prevPage.$vm.page = 1
									prevPage.$vm.orderList = []
									prevPage.$vm.nodata = true
									prevPage.$vm.more = true
									prevPage.$vm.getOrderList()
									uni.navigateBack({
										delta: 1
									})
								} else {
									this.apifun.toast(res.msg)
								}
							}), true, true)
						}
					}
				})
			},
			setAddr(item) {
				let data = {
					order_sn: this.orderDetail.order_sn,
					address_id: item.id
				}
				this.apifun.unirequest("/api/order/setOrderCreate", "post", data, (res => {
					if (res.code == 200) {
						this.apifun.toast("已更改")
						this.getOrderDetail()
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			},
			cancelOrder() {
				uni.showModal({
					title: "确定取消订单吗？",
					cancelText: "取消",
					cancelColor: "#999999",
					confirmText: "确定",
					confirmColor: "#9E190F",
					success: (res) => {
						if (res.confirm) {
							let data = {
								id: this.orderDetail.id
							}
							this.apifun.unirequest("/api/order/cancelOrder", "post", data, (res => {
								if (res.code == 200) {
									this.apifun.toast(res.msg)
									let pages = getCurrentPages();
									let prevPage = pages[pages.length - 2];
									prevPage.$vm.page = 1
									prevPage.$vm.orderList = []
									prevPage.$vm.nodata = true
									prevPage.$vm.more = true
									prevPage.$vm.getOrderList()
									uni.navigateBack({
										delta: 1
									})
								} else {
									this.apifun.toast(res.msg)
								}
							}), true, true)
						}
					}
				})
			},
			async getOrderDetail() {
				let data = {
					order_sn: this.order_sn
				}
				await this.apifun.unirequest('/api/order/getOrderDetail', 'post', data, (res => {
					if (res.code == 200) {
						this.orderDetail = res.data
						this.getType(res.data.order_status)
						if (res.data.order_status == 2 || res.data.order_status == 3 || res.data
							.order_status == 4) {
							this.getErCode()
						}
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			},
			async getErCode() {
				let data = {
					order_sn: this.order_sn
				}
				await this.apifun.unirequest("/api/order/createOrderQrcode", "post", data, (res => {
					if (res.code == 200) {
						this.ercode = res.data
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, false)
			},
			getType(num) {
				let data = ""
				if (num >= 0) {
					data = this.typeList.filter(item => {
						return item.id == num
					})[0].name
				}
				if (num == 3 && this.orderDetail.order_type == 2) {
					this.nav_title = "待发货"
				} else if (num == 2 && this.orderDetail.order_type == 1) {
					this.nav_title = "已核销"
				} else {
					this.nav_title = data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay_btn_gary {
		width: 150rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background-color: #E9E9EA;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #A2A2A2;
		margin-right: 20rpx;
	}

	.pay_btn_warp {
		display: flex;
		align-items: center;
	}

	.ercode_img {
		width: 320rpx;
		height: 320rpx;
	}

	.ercode_img_gary {
		width: 320rpx;
		height: 320rpx;
		filter: opacity(0.2);
	}

	.er_tips {
		color: #9E9E9E;
		font-size: 24rpx;
	}

	.erc_title {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.erc_type_word {
		font-size: 24rpx;
		color: #666666;
	}

	.erc_body {
		width: 100%;
		height: 460rpx;
		padding: 20rpx 0rpx 40rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.erc_line {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.line {
			width: 572rpx;
			border-top: 2rpx dashed #D8D8D8;
		}

		.r_cir {
			width: 15rpx;
			height: 30rpx;
			background-color: #F4F4F4;
			border-radius: 30rpx 0rpx 0rpx 30rpx;
		}

		.l_cir {
			width: 15rpx;
			height: 30rpx;
			background-color: #F4F4F4;
			border-radius: 0rpx 30rpx 30rpx 0rpx;
		}
	}

	.erc_top {
		width: 100%;
		height: 166rpx;
		padding: 40rpx 40rpx 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.ercode_warp {
		width: 630rpx;
		height: 682rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		margin: 0rpx auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.mytopbg,
	.topblock {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 338rpx;
		z-index: -1;
	}




	.marT20 {
		margin-top: 20rpx;
	}

	.pay_word {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pay_btn {
		width: 150rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background-color: #9E190F;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		/* 兼容 iOS < 11.2 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
		/* 兼容 iOS >= 11.2 */
	}

	.sub_body {
		width: 100%;
		background-color: #FFFFFF;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #F4F4F4;
	}

	.cell_item {
		width: 100%;
		padding: 20rpx 0rpx 20rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.deduct {
		color: #666666;
		font-size: 30rpx;
		display: flex;
		align-items: center;

	}

	.ci_title {
		color: #666666;
		font-size: 30rpx;
	}

	.cell_warp {
		width: 690rpx;
		padding: 20rpx 32rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.add_bottom {
		color: #333333;
		font-size: 26rpx;
	}

	.add_center {
		font-size: 26rpx;
		color: #666666;
		margin-top: 5rpx;
		margin-bottom: 20rpx;
	}

	.add_data {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.addr_word {
		width: 580rpx;
	}

	.add_top {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.city {
		font-size: 30rpx;
		color: #333333;
	}

	.edit_addr {
		width: 180rpx;
		color: #9E9E9E;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.address {
		width: 690rpx;
		border-radius: 14rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.add_nodata {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.addr_tips {
			color: #666666;
			font-size: 30rpx;
		}
	}

	.product_warp {
		width: 690rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin: 18rpx auto;
	}

	.sel_type {
		width: 196rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: url("../../static/order/buy_type.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9E190F;
		font-size: 30rpx;
		border: 1rpx solid #9E190F;
	}

	.nosel_type {
		width: 196rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: url("../../static/order/buy_type.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #979797;
		font-size: 30rpx;
	}

	.type_warp {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.content {
		width: 100%;
		padding: 180rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}
</style>